<template>
  <div class="f-media-containter">
    <n-spin v-if="loading" style="width: 100%;height: 100%;position: absolute;left: 0;top:0;"></n-spin>
    <img object-fit="contain" style="max-width: 100%;max-height: 100%;object-fit:contain"
      v-if="meta_type == 'image' && media_url" :src="media_url" fit="cover" />
    <video v-if="meta_type == 'video' && media_url" :src="media_url" controlsList="nodownload" ref="videoRef" @click.stop />
    <div class="creative-upfile-operation" v-if="media_url">
      <n-icon class="play-btn" size="40" color="white" @click.stop="triggerVideo" v-if="meta_type == 'video'">
        <PlayCircleOutlined v-if="isPaused"></PlayCircleOutlined>
        <PauseCircleOutlined v-else></PauseCircleOutlined>
      </n-icon>
    </div>
  </div>


</template>
<script lang="ts" setup>
import { NImage, NSpin, NIcon } from 'naive-ui';
import { withDefaults, defineProps, ref } from 'vue';
import { PlayCircleOutlined, PauseCircleOutlined } from '@vicons/antd'
const props = defineProps({
  media_url: {
    type: String,
    default: ''
  },
  meta_type: {
    type: String,
    default: ''
  },
  loading: {
    default: false
  }
})

const videoRef = ref();
const isPaused = ref(true);

function triggerVideo() {
  const video = videoRef.value;
  if (video) {
    isPaused.value = !video.paused;
    video.paused ? video.play() : video.pause();
  }

}



</script>
<style lang="scss" scoped>
.f-media-containter {
  // position: absolute;
  height: 100%;
  max-width: 252px;
  width: 100%;
  position: relative;
  padding: 10px;
  display: flex;
  align-items: center;
  video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
  }
  &:hover .creative-upfile-operation {
    display: block;
  }
}

.creative-upfile-operation {
  position: absolute;
  height: 90%;
  max-width: 252px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
